<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串模板</title>
</head>
<body>
    <div id="todos"></div>
    <script>
        const todos =[
            {
                id:1,
                text: '学习es6'
            },
            {
                id:2,
                text: '通读你不知道的js'
            }
        ]
        // dom 编程

        const todosEl = document.getElementById('todos');
        //js除了简单数据类型，都是对象
        console.log(todosEl,Object.prototype.toString.call(todosEl));
        // template string 支持换行，在 DOM html 表达中游刃有余
        todosEl.innerHTML =`
        <ul>
            ${//占位符
            // js 运行区域
            // map 迭代数组的每一项
             todos.map(todo=>`
             <li>${todo.text}</li>
             `).join('')
            }    
        </ul>
        `
    </script>
</body>
</html>